doctype html
html
  head
    title CyberChef
    link(rel="import", href="../../../cyberchef.htm")
    style(type='text/css').
      body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }
      #content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0px;
      }

  body
    div#content

    script.
      if ('import' in document.createElement('link')) {
        // browser is good!
        var link = document.querySelector('link[rel="import"]');
        var cyberchef = link.import.querySelector('body');
        document.body.parentNode.replaceChild(cyberchef, document.body);
        document.getElementById('input-text').value = '#{value}';
      } else { // use iFrame for bad browsers
        var iframe = document.createElement('iframe');
        iframe.src = '../../../cyberchef.htm';
        iframe.setAttribute('width', '100%');
        iframe.setAttribute('height', '100%');
        iframe.setAttribute('frameborder', '0');
        document.getElementById('content').appendChild(iframe);
        iframe.addEventListener('load', function () {
          var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
          innerDoc.getElementById('input-text').value = '#{value}';
        });
      }
